<template>
  <view class="bookInfo-container">
    <view class="book-container">
      <view class="img-container">
        <image class="img" src="../../../static/test/manhua.png" mode="scaleToFill"></image>
      </view>
      <view class="book-info-card">
        <view class="book-title">
          <text class="title uni-ellipsis">漫漫人生路，长啸凯歌行</text>
          <text class="book-source">瞎几把写</text>
        </view>
        <view class="book-data">
          <text class="data-item data-collection">12345收藏</text>
          <text class="data-item data-thumbs-up">12345点赞</text>
          <text class="data-item data-reading-num">12345人气</text>
        </view>
        <view class="book-introduce">
          <text class="info-text">
            在我们平时使用各种框架的时候，都避免不了使用到一种特性，就是 生命周期 钩子，这些钩子，可以给我们提供很多便利，让我们在数据更新的每一个阶段，都可以捕捉到它的变化。
          </text>
        </view>
      </view>
      <view class="book-status">
        <text class="status-title">连载中</text>
        <text class="book-current">已更新到318话 &gt;</text>
      </view>
      <view class="book-chapter-container">
        <view class="book-chapter-item uni-ellipsis" v-for="(v,i) in bookList" :key="i" @click="chooseItem(v)">{{i+1}}. {{v.name}}</view>
      </view>
      <view class="hot-topic-container">
        <view class="hot-topic-header">
          <view class="hot-topic-title">
            <text class="topic-title">热门话题</text>
            <text class="topic-num">共10000000条</text>
          </view>
          <view class="send-icon">
            <uni-icons type="compose" size="24"></uni-icons>
            <text class="send-text">发话题</text>
          </view>
        </view>
        <view class="topic-list-container">
          <view class="topic-item" v-for="i in 2" :key="i">
            <view class="topic-person">
              <view class="person-img">
                <image class="img" src="../../../static/vip-card-bg.png" mode="scaleToFill"></image>
              </view>
              <view class="topic-info">
                <view class="person-info">
                  <text class="person-name">aaaa</text>
                  <text class="person-level">lv3</text>
                </view>
                <text class="topic-publish-time">2019年8月20日 10:23</text>
              </view>
            </view>
            <view class="topic-content">
              <text class="text-content">
                这张图其实已经大概的告诉了我们，每个阶段做了什么，但是我觉得还有必要详细的去分析一下，这样在未来如果我们要实现类似于 vue 这种框架的时候，可以知道在什么时间，应该去做什么，怎么去实现。
              </text>
            </view>
            <view class="feedback-info">
              <text class="chapter-info uni-ellipsis">出自章节：# 漫漫人生路，长啸凯歌行 #</text>
              <view class="feedback-icons">
                <uni-icons class="icon hand-thumbsup" type="hand-thumbsup" size="16" ></uni-icons>
                <text class="icon-num">123</text>
                <uni-icons class="icon chatbubble" type="chatbubble" size="16" ></uni-icons>
                <text class="icon-num">233</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'bookeInfo',
  data() {
    return {
      bookList: [
        {cover: '../../../static/test/manhua.png', name: '你想要'},
        {cover: '../../../static/test/manhua.png', name: '你想要什么？'},
        {cover: '../../../static/test/manhua.png', name: '漫漫人生路，长啸凯歌行...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
        {cover: '../../../static/test/manhua.png', name: '白驹过隙，蹉跎岁月...'},
      ]
    }
  },
  onLoad(options) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('emitBookInfo', (data)=>{
      console.log(data)
    })
  },
  methods: {
    chooseItem(v) {
      console.log(v)
      uni.navigateTo({
        url: '/pages/tabBar/book/readingPage'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bookInfo-container {
  /* #ifdef H5 */
  width: 100%;
  /* #endif */
  width: 750rpx;
  background: #FFF;
  .book-container {
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    width: 750rpx;
    height: 740rpx;
    .img-container {
      /* #ifdef H5 */
      width: 100%;
      /* #endif */
      width: 750rpx;
      height: 400rpx;
      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .book-info-card {
      // position: absolute;
      width: 680rpx;
      margin: -180rpx auto 55rpx;
      padding: 12rpx;
      box-shadow: 0 0 10rpx 5rpx #999;
      border-radius: 14rpx;
      position: relative;
      z-index: 10;
      background: #fff;
      .book-title {
        width: 680rpx;
        height: 34rpx;
        margin: 14rpx auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .title {
          /* #ifdef H5 */
          width: 60%;
          /* #endif */
          width: 408rpx;
          height: 34rpx;
          line-height: 34rpx;
          font-size: 34rpx;
          font-weight: bold;
        }
        .book-source{
          width: 40%;
          font-size: 20rpx;
        }
      }
      .book-data{
        /* #ifdef H5 */
        width: 80%;
        /* #endif */
        width: 680rpx;
        height: 44rpx;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        .data-item {
          height: 30prx;
          margin: 4px 6px;
          padding: 6rpx 16rpx;
          line-height: 30rpx;
          text-align: center;
          background: rgb(231, 229, 229);
          border-radius: 16rpx;
          font-size: 16rpx;
        }
      }
      .book-introduce {
        /* #ifdef H5 */
        width: 80%;
        /* #endif */
        width: 680rpx;
        margin: 10rpx 0;
        padding: 5rpx 9rpx;
        .info-text {
          font-size: 14rpx;
          /* #ifdef MP-WEIXIN */
          font-size: 28rpx;
          /* #endif */
        }
      }
    }
    .book-status {
      margin: 0 auto;
      /* #ifdef H5 */
      width: 80%;
      /* #endif */
      width: 680rpx;
      height: 34rpx;
      line-height: 34rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .status-title {
        /* #ifdef H5 */
        width: 60%;
        /* #endif */
        width: 450rpx;
        height: 34rpx;
        line-height: 34rpx;
        font-size: 34rpx;
        font-weight: bolder;
      }
      .book-current {
        /* #ifdef H5 */
        width: 40%;
        /* #endif */
        width: 230rpx;
        height: 34rpx;
        line-height: 34rpx;
        font-size: 20rpx;
        /* #ifdef MP-WEIXIN */
        font-size: 24rpx;
        /* endif */
        font-weight: bold;
        text-align: right;
      }
    }
    .book-chapter-container {
      margin: 0 auto;
      /* #ifdef H5 */
      width: 90%;
      /* #endif */
      width: 720rpx;
      height: 420rpx;
      padding: 5rpx 12rpx;
      background: #FFF;
      overflow: hidden;
      .book-chapter-item {
        // box-sizing: content-box;
        display: inline-block;
        /* #ifdef H5 */
        width: 33%;
        /* #endif */
        width: 200rpx;
        margin: 10rpx;
        padding: 6rpx 8rpx;
        height: 34rpx;
        line-height: 34rpx;
        text-align: center;
        background: rgb(231, 225, 225);
        font-weight: bold;
        border-radius: 18rpx;
      }
    }
    .hot-topic-container {
      // margin: 10rpx auto;
      /* #ifdef H5 */
      width: 100%;
      /* #endif */
      // width: 680rpx;
      width: 750rpx;
      padding: 0 35rpx;
      background: #fff;
      // height: 40rpx;
      .hot-topic-header {
        /* #ifdef H5 */
        width: 80%;
        /* #endif */
        width: 680rpx;
        height: 40rpx;
        line-height: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .hot-topic-title {
          /* #ifdef H5 */
          width: 50%;
          /* #endif */
          width: 340rpx;
          .topic-title {
            font-size: 34rpx;
            font-weight: bolder;
            margin-right: 10rpx;
          }
          .topic-num {
            font-size: 20rpx;
            /* #ifdef MP-WEIXIN */
            font-size: 24rpx;
            /* endif */
            color: #bbb;
          }
        }
        .send-icon {
          width: 150rpx;
          .send-text {
            font-size: 14rpx;
            /* #ifdef MP-WEIXIN */
            font-size: 24rpx;
            /* endif */
            font-weight: bolder;
            height: 40rpx;
            line-height: 40rpx;
          }
        }
      }
      .topic-list-container {
        /* #ifdef H5 */
        width: 100%;
        /* #endif */
        width: 750rpx;
        // padding: 0 35rpx;
        .topic-item {
          /* #ifdef H5 */
          width: 80%;
          /* #endif */
          width: 680rpx;
          // height: 80rpx;
          .topic-person {
            /* #ifdef H5 */
            width: 100%;
            /* #endif */
            width: 680rpx;
            height: 80rpx;
            &::after {
              content: '';
              display: block;
              clear: both;
            }
            .person-img{
              float: left;
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
              overflow: hidden;
              .img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .topic-info {
              float: left;
              margin-left: 20rpx;
              /* #ifdef H5 */
              width: 50%;
              /* #endif */
              width: 340rpx;
              height: 80rpx;
              .person-info {
                /* #ifdef H5 */
                width: 100%;
                /* #endif */
                width: 340rpx;
                height: 40rpx;
                line-height: 40rpx;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .person-name {
                  /* #ifdef H5 */
                  width: 60%;
                  /* #endif */
                  width: 204rpx;
                  height: 40rpx;
                  line-height: 40rpx;
                }
                .person-level {
                  /* #ifdef H5 */
                  width: 20%;
                  /* #endif */
                  width: 68rpx;
                  height: 40rpx;
                  line-height: 40rpx;
                  text-align: center;
                  background: #f00;
                  color: #fff;
                  border-radius: 20rpx;
                  font-size: 12rpx;
                  /* #ifdef MP-WEIXIN */
                  font-size: 24rpx;
                  /* #endif */
                }
              }
              .topic-publish-time {
                /* #ifdef H5 */
                width: 100%;
                /* #endif */
                width: 340rpx;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 18rpx;
                color: #aaa;
              }
            }
          }
          .topic-content {
            /* #ifdef H5 */
            width: 100%;
            /* #endif */
            width: 680rpx;
            padding: 10rpx 14rpx;
            display: block;
          }
          .feedback-info {
            /* #ifdef H5 */
            width: 100%;
            /* #endif */
            width: 680rpx; 
            height: 45rpx;
            margin: 14rpx 0;
            padding-bottom: 20rpx;
            display: flex;
            justify-content: space-between;
            align-content: center;
            border-bottom: 1px solid #ccc;
            .chapter-info {
              /* #ifdef H5 */
              width: 60%;
              /* #endif */
              // width: 680rpx;
              height: 45rpx;
              line-height: 45rpx;
              color: #888;
            }
            .feedback-icons {
              /* #ifdef H5 */
              width: 40%;
              /* #endif */
              width: 272rpx;
              height: 45rpx;
              line-height: 45rpx;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              .icon{
                margin: 0 5rpx;
                color: #aaa;
              }
              .icon-num {
                margin-right: 12rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>